<template>
    <div>
        <el-form-item label="教练意见">
            <el-select v-model="detailForm.type" placeholder="请选择">
                <el-option v-for="(item,index) in option" :key="index" :value="item.value"
                           :label="item.label"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <div class="jingyan_input">
                <el-input v-model="detailForm.content" style="width:500px" type="textarea"
                          :autosize="{ minRows: 6, maxRows: 8}"></el-input>
                <div class="jingyan_input2">
                    <el-button type="primary" @click="addcomment">添加</el-button>
                    <el-button type="primary" @click="qingkong">清空</el-button>
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <div class="pinglunlist">
                <div class="pinglunlistitem" v-for="(item,index) in list" :key="index">
                    <div class="jianyititle">
                        <span>
                            {{item.type|filterstype(option)}}
                        </span>
                        <span>
                            {{item.createTime|filterstime}}
                        </span>
                    </div>
                    <div class="jianyicont">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </el-form-item>
    </div>
</template>


<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import wound from "@/components/coach/wound.vue";
    import {mapActions} from 'vuex'
    import {baseImgPath, basefile,imgupload} from '@/config/env.js';
    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }
    export default {
        components: {
            PlatformCrumb,
            wound
        },
        data() {
            return {
                detailForm: {
                    name: '',
                    type: 0,
                    content: '',
                    coachId: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                    playerId: this.$route.query.id
                },
                option: [{
                    label: '专业',
                    value: 0
                }, {
                    label: '饮食',
                    value: 1
                }, {
                    label: '健康',
                    value: 2
                }],
                list: []
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'getPlayerDetail',
                'fetchSelectList',
                'editPlayerInfo',
                'woundLogsgetList',
                'woundLogsedit',
                'woundLogsget',
                'woundLogsadd',
                'coachSuggestionsadd',
                'coachSuggestionsedit',
                'coachSuggestionsget',
                'coachSuggestionsgetList',
            ]),

            onCancel() {
                this.$router.back()
            },

            qingkong() {
                this.detailForm.content = ''
            },

            getwoundLogsgetList() {
                this.woundLogsgetList(
                    {"id": this.id}
                ).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.shangbinglist = list || []
                    }
                })
            },

            addcomment() {
                this.coachSuggestionsadd(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        })
                        this.getlist()
                    }
                })
            },

            getlist() {
                console.log("123");
                this.coachSuggestionsgetList({"playerId": this.id}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.list = list
                    }
                })
            },
        },
        filters: {
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].value) {
                        return data[i].label
                    }
                }
            },
            filtersImg: function (img) {
                return basefile + img
            },
            filterstime: function (e) {
               return  formatDate(e, 'Y-M-D H:I:S')
            },
        },
        computed: {
            id() {
                return this.$route.query.id
            }
        },

        created() {
            this.getlist()
        },

    }
</script>

<style scoped>
    .playerDetail {
        margin: 0 auto;
        margin-top: 100px;
        /*width: 1160px;*/
        background: #fff;
        padding: 10px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .sbsclass {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .sbsclass .sbs {
        margin-left: 20px;
    }

    .coach-page {
        padding-top: 80px;
    }

    .coach-page .content {
        margin: 0 auto;
        width: 1140px;
        background-color: #fff;
        margin-bottom: 40px;
        margin-top: 12px;
    }

    .jingyan_input {
        width: 500px;
        position: relative;
    }

    .jingyan_input2 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

    .jianyititle {
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #999;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

</style>
